<template>
	<view class="forms">
		<view class="base-info">
			<view class="item">
				<text style="display: flex;"><text style="color: red;">* </text> 真实姓名</text>
				<input v-model="FormData.cameramanName" type="text" placeholder="请输入真实姓名">
			</view>
			<view class="item">
				<text style="display: flex;"><text style="color: red;">* </text> 身份证号</text>
				<input v-model="FormData.cameramanIdCard" type="text" placeholder="请输入身份证号" @blur="validateCard">
			</view>
			<view class="item">
				<text style="display: flex;"><text style="color: red;">* </text> 手机号</text>
				<input v-model="FormData.phone" type="text" placeholder="请输入手机号" @blur="validatePhone">
			</view>
			<view class="item">
				<text>性别</text>
				<uni-data-select v-model="FormData.sex" :localdata="gender" placeholder="请选择性别"></uni-data-select>
			</view>
			<view class="item">
				<text>主营城市</text>
				<uni-data-select v-model="FormData.operateCityCode" :localdata="cityData" placeholder="请选择主营城市"
					@change="cityChange"></uni-data-select>
			</view>
			<view class="item">
				<text>主营雪场</text>
				<mySelectCheckbox v-model="FormData.snowValue" collapse-tags :collapse-tags-num="1" multiple
					dataKey="snowField" dataValue="id" :localdata="snowData">
				</mySelectCheckbox>
			</view>
			<view class="item">
				<text>滑雪技能</text>
				<uni-data-select v-model="FormData.skiSkill" :localdata="skiSkill"
					placeholder="请选择滑雪技能"></uni-data-select>
			</view>
		</view>
		<view class="idcard-info">
			<text style="display: flex;"><text style="color: red;">* </text>证件上传</text>
			<view class="card">
				<view class="left">
					<view class="pic" @click="handIdFrontImage">
						<view class="pic-border"></view>
						<image :src="FormData.handIdFrontImage?FormData.handIdFrontImage: imageUrl + 'image/zheng.png'"
							mode="aspectFit"></image>
					</view>
					<text>上传身份证正面照</text>
				</view>
				<view class="right">
					<view class="pic" @click="handIdOppositeImage">
						<view class="pic-border"></view>
						<image
							:src="FormData.handIdOppositeImage?FormData.handIdOppositeImage: imageUrl + 'image/fan.png'"
							mode="aspectFit"></image>
					</view>
					<text>上传身份证反面照</text>
				</view>
			</view>
		</view>
		<view class="other">
			<text>其他原因</text>
			<textarea v-model="FormData.remark"></textarea>
		</view>
		<button @click="submitForm">提交注册</button>
	</view>
</template>

<script>
	import {
		getToken,
	} from '@/utils/storage.js'
	import {
		setCameraReg,
		AllCounty,
		snowFieldList
	} from '@/api/skill.js'
	import env from '@/utils/config.js'
	import imageConfig from '@/utils/images.js'
	import mySelectCheckbox from './photographer-ach.vue'

	export default {
		components: {
			mySelectCheckbox
		},
		data() {
			return {
				imageUrl: imageConfig.uploadImageUrl,
				// 性别
				gender: [{
					value: 0,
					text: '女'
				}, {
					value: 1,
					text: '男'
				}],
				// 主营城市
				cityData: [],
				// 主营雪场
				snowData: [],
				// 滑雪技能
				skiSkill: [{
					value: 'single_board',
					text: '单板'
				}, {
					value: 'double_board',
					text: '双板'
				}, {
					value: 'metropolitan',
					text: '都会'
				}, {
					value: 'none',
					text: '什么都不会滑'
				}],
				// 表单数据
				FormData: {
					cameramanName: '', //真实姓名
					cameramanIdCard: '', //身份证号
					phone: '', //手机号
					sex: 1, // 性别
					operateCityCode: '', //主营城市
					snowValue: [], //主营雪场id
					snowFieldId: '',
					skiSkill: '', //滑雪技能
					remark: '', //其他原因
					handIdFrontImage: '', //上传身份证正面照
					handIdOppositeImage: '', //手持身份证反面
				}
			}
		},
		onReady() {},
		onLoad() {
			// 获取主营城市数据
			this.getAllCity()
		},
		methods: {
			// 获取主营城市数据
			getAllCity() {
				AllCounty(0).then(res => {
					res.data.forEach(item => {
						this.$set(item, 'text', item.name)
						this.$set(item, 'value', item.id)
					})
					this.cityData = res.data
				})
			},
			// 选择主营城市
			cityChange(e) {
				this.FormData.snowFieldId = ''
				snowFieldList({
					snowAddressIdPath: e
				}).then(res => {
					this.snowData = res.data
				})
			},
			// 身份证号校验
			validateCard(e) {
				const idCardRegex = /(^\d{15}$)|(^\d{17}([0-9]|X)$)/;
				if (!idCardRegex.test(e.detail.value)) {
					uni.showToast({
						title: "身份证格式错误",
						icon: "error"
					})
					this.FormData.cameramanIdCard = ''
					return
				}
			},
			// 手机号校验
			validatePhone(e) {
				const phoneRegex = /^0?(13[0-9]|14[0-9]|15[0-9]|16[0-9]|17[0-9]|18[0-9]|19[0-9])[0-9]{8}$/;
				if (!phoneRegex.test(e.detail.value)) {
					uni.showToast({
						title: "手机号格式错误",
						icon: "error"
					})
					this.FormData.phone = ''
				}
			},
			// 上传身份证正面照
			handIdFrontImage() {
				uni.chooseImage({
					count: '1',
					sourceType: ['albun', 'camera'],
					success: (res) => {
						this.uploadFile(res.tempFilePaths[0], 'zheng')
					}
				})
			},

			// 上传身份证反面照
			handIdOppositeImage() {
				uni.chooseImage({
					count: '1',
					sourceType: ['albun', 'camera'],
					success: (res) => {
						this.uploadFile(res.tempFilePaths[0], 'fan')
					}
				})
			},

			// 上传图片
			uploadFile(filePath, flag) {
				uni.uploadFile({
					url: env.baseURL + '/common/upload',
					name: 'file',
					filePath: filePath,
					header: {
						accessToken: 'Bearer ' + getToken('access_token_key'),
						Authorization: 'Bearer ' + getToken('access_token_key'),
						'Content-Type': 'multipart/form-data'
					},
					success: (res) => {
						if (flag == 'zheng') {
							this.FormData.handIdFrontImage = env.baseURL + JSON.parse(res.data).fileName
						} else {
							this.FormData.handIdOppositeImage = env.baseURL + JSON.parse(res.data).fileName
						}
					}
				})
			},

			// 提交注册
			submitForm() {
				if (this.FormData.cameramanName == '') {
					uni.showToast({
						title: '请输入真实姓名',
						icon: 'none'
					})
					return
				}
				if (this.FormData.cameramanIdCard == '') {
					uni.showToast({
						title: '请输入身份证号',
						icon: 'none'
					})
					return
				}
				if (this.FormData.phone == '') {
					uni.showToast({
						title: '请输入手机号',
						icon: 'none'
					})
					return
				}
				if (this.FormData.handIdFrontImage == '') {
					uni.showToast({
						title: '上传身份证正面照',
						icon: 'none'
					})
					return
				}
				if (this.FormData.handIdOppositeImage == '') {
					uni.showToast({
						title: '上传身份证反面照',
						icon: 'none'
					})
					return
				}
				this.FormData.snowFieldId = this.FormData.snowValue.join(',')
				// 在此处可以将表单数据进行处理或提交
				setCameraReg(this.FormData).then(res => {
					if (res.code == 200) {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
						uni.switchTab({
							url: '/pages/index/index'
						})
					} else {
						uni.showToast({
							title: '注册失败',
							icon: 'none'
						})
					}
				})
			},

		}
	}
</script>

<style lang="less" scoped>
	@import url('@/static/style/photographer-reg.less');
</style>

<style lang="less">
	page {
		background-color: #f1f1f1;
		padding: 20rpx 20rpx;
		box-sizing: border-box;
	}

	/deep/ .uni-select {
		border: none !important;
		border-bottom: none !important;
		padding: 0 0px !important;
		padding-left: 0px !important;
	}
</style>